<!--
 * @Description: 
 * @Author: Dxcr
 * @Date: 2022-09-09 09:35:00
 * @LastEditTime: 2024-10-31 14:32:01
 * @LastEditors: Dxcr
-->
<template>
	<div class="index_container">
		<DMapbox ref="map" @clickMap="clickMap" @clickFullScreen="clickFullScreen" @clickPipeline="clickPipeline"
			:pipelines="data.pipelines" :pipelinesSelected="data.pipelinesSelected" :markers="data.markers"
			:alarms="data.alarms" :planes="data.planes" :areas="data.areas" :camera="data.camera"
			:detectors="data.detectors"
			:pipelinePopup="pipelinePopup" :stations="data.stations" :center="data.center" :mapStyle="data.mapStyle">
		</DMapbox>
	</div>
</template>
<script lang="js" setup>
import {
	defineComponent,
	ref,
	reactive,
	computed,
	toRefs,
	onMounted,
	nextTick
} from 'vue'
import { useRouter, useRoute } from 'vue-router';
import DMapbox from '@/components/mapbox/D-Mapbox.vue';
import _ from 'lodash'
import mitt from '@/utils/mitt.js';
/* turf 地理空间分析库，处理各种地图算法 */
import * as turf from '@turf/turf';
import QtHandler from './Qt/QtHandler.js'
const getRoute = useRoute()
const router = useRouter()
const props = defineProps({
	pipelinePopup: {
		default() {
			return false;
		},
	}
});

let pipelines =
	[{
		info: "管道信息",
		name: "dsas",
		paths: [
			[118.5449181890234, 37.53133161998339],
			[118.56836835747413, 37.4658132942384]
		],
		id: "1"
	},
	{
		info: "管道信息",
		name: "东营压气站2",
		paths: [
			[118.4449181890234, 37.53133161998339],
			[118.46836835747413, 37.4658132942384]
		],
		id: "2"
	}]

let alarms = [
	{
		position: [118.5449181890234, 37.53133161998339],
		type: 'specialposition',//名称
		name: '东营压气站',
		id: "1",
		detail: {
			"id": "1810851825126002689",
			"pipeName": "五莲到桃园",
			"alarmTypeName": "挖掘报警",
			"locText": "东干线测324->东干线测323,距东干线测323 206m",
			"alarmTime": "2024-07-10 09:41:16",
		}
	},
	{
		position: [118.56836835747413, 37.4658132942384],
		type: 'specialposition',//名称
		name: '庐山路天然气配气站',
		id: "2",
		detail: {
			"id": "1810851825126002689",
			"pipeName": "五莲到桃园",
			"alarmTypeName": "挖掘报警",
			"locText": "东干线测324->东干线测323,距东干线测323 206m",
			"alarmTime": "2024-07-10 09:41:16",
		}
	},
]

let markers = [
	{
		position: [118.6449181890234, 37.53133161998339],
		name: '东营压气站',
		type: 'marker',
		id: "1"
	},
	{
		position: [118.66836835747413, 37.4658132942384],
		name: '庐山路天然气配气站',
		type: 'marker',
		id: "2"
	},
]

let detectors = [{
	position: [118.5449181890234, 37.53133161998339],
	type: 'specialposition',//名称
	name: '东营压气站',
	id: "1",
	detail: {
		"id": "1810851825126002689",
		"pipeName": "五莲到桃园",
		"alarmTypeName": "挖掘报警",
		"locText": "东干线测324->东干线测323,距东干线测323 206m",
		"alarmTime": "2024-07-10 09:41:16",
	}
}]

let center = [118.56836835747413, 37.4658132942384]


const data = reactive({
	pipelines: [],
	markers: [],
	stations: [],
	alarms: [],
	planes: [],
	camera: [],
	detectors:[],
	areas: [],
	center: [],
	mapStyle: {
		tianditu: false,
		offline: {

		}
	}
})

/**
 * @description: 设置所有数据
 * @param {*} datas
 * @return {*}
 */
function setDatas(datas) {
	// let json = JSON.parse(datas)
	Object.assign(this.data, datas);
}

/**
 * @description: 设置图例
 * @param {*} markers 
 * @return {*}
 */
function setMarkers(markers) {
	console.error(markers)
	// let json = JSON.parse(markers)
	data.markers = markers
}

/**
 * @description: 设置管道
 * @param {*} pipelines 
 * @return {*}
 */
function setPipelines(pipelines) {
	data.pipelines = pipelines
}

/**
 * @description: 设置报警
 * @param {*} alarms 
 * @return {*}
 */
function setAlarms(alarms) {
	// let json = JSON.parse(alarms)
	data.alarms = alarms
}

/**
 * @description: 设置报警
 * @param {*} alarms 
 * @return {*}
 */
 function setDetectors(detectors) {
	// let json = JSON.parse(alarms)
	data.detectors = detectors
}

function setCenter(center) {
	// let json = JSON.parse(center)
	data.center = center
}




// 创建 QtHandler 实例
const qtHandler = new QtHandler();
qtHandler.on('setMarkers', setMarkers)
qtHandler.on('setPipelines', setPipelines)
qtHandler.on('setAlarms', setAlarms)
qtHandler.on('setCenter', setCenter)
qtHandler.on('setDetectors', setDetectors)
qtHandler.on('setDatas', setDatas)

window.setDetectors(detectors)
// window.setAlarms(alarms)
// window.setMarkers(markers)

// pipelines = [{
// 		info: "管道信息",
// 		name: "东营压气站1",
// 		paths: [
// 			[118.5449181890234, 37.53133161998339],
// 			[118.46836835747413, 37.4658132942384]
// 		],
// 		id: "2"
// 	},
// 	]
// setTimeout(() => {
// 	window.setPipelines(JSON.stringify(pipelines))
// }, 5000);
// window.setCenter(JSON.stringify(center))

function clickFullScreen() {
	qtHandler.invoke('clickFullScreen')
}

function clickMap(lon, lat) {
	qtHandler.invoke('getCoordinate', lon, lat)
}

onMounted(async () => {

})
</script>
<style lang="scss" scoped>
.index_container {
	height: 100%;
}
</style>